﻿<!DOCTYPE html>
<html>

<head>
    
    <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=0 height=0 src="//music.163.com/outchain/player?type=2&id=2001684721&auto=1&height=32"></iframe>
	<meta charset="utf-8">
	<title>跨年代码</title>

<!-- <body background="https://pic1.zhimg.com/v2-5b5c60ed3525f648e34fd4c05570a124_b.jpg"></body> -->
</head>


<style>
.chakra-ui-light{
  background-color: #edddfd;
}
.main-box {
  border-radius: 15px !important;
  box-shadow: unset !important;
}
.chakra-ui-light .main-box {
  background-color: rgba(255, 255, 255, 0) !important;
}
.chakra-ui-light .readme-box {
  background-color: rgba(255, 255, 255, 0) !important;
}
.readme-box {
  border-radius: 15px !important;
  box-shadow: unset !important;
}
</style>
<!--放在自定义头部-->

<style>
/*渐变背景CSS */
#canvas-basic {
    position: fixed;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -999;
}
</style>


<!--放在自定义body-->

<!-- 渐变背景初始化 -->
<canvas id="canvas-basic"></canvas> 
<script src="https://npm.elemecdn.com/granim@2.0.0/dist/granim.min.js"></script>
<script>
var granimInstance = new Granim({
    element: '#canvas-basic',
    direction: 'left-right',
    isPausedWhenNotInView: true,
    states : {
        "default-state": {
            gradients: [
                ['#a18cd1', '#fbc2eb'],
                 ['#fff1eb', '#ace0f9'],
                 ['#d4fc79', '#96e6a1'],
                 ['#a1c4fd', '#c2e9fb'],
                 ['#a8edea', '#fed6e3'],
                 ['#9890e3', '#b1f4cf'],
                 ['#a1c4fd', '#c2e9fb'],
                 ['#fff1eb', '#ace0f9']
           
            ]
        }
    }
});
</script>


 
<body>
    <!-- 网页鼠标点击特效（爱心） -->
    <script type="text/javascript">
         ! function (e, t, a) {
            function r() {
                for (var e = 0; e < s.length; e++) s[e].alpha <= 0 ? (t.body.removeChild(s[e].el), s.splice(e, 1)) : (s[
                        e].y--, s[e].scale += .004, s[e].alpha -= .013, s[e].el.style.cssText = "left:" + s[e].x +
                    "px;top:" + s[e].y + "px;opacity:" + s[e].alpha + ";transform:scale(" + s[e].scale + "," + s[e]
                    .scale + ") rotate(45deg);background:" + s[e].color + ";z-index:99999");
                requestAnimationFrame(r)
            }
            function n() {
                var t = "function" == typeof e.onclick && e.onclick;
                e.onclick = function (e) {
                    t && t(), o(e)
                }
            }
 
            function o(e) {
                var a = t.createElement("div");
                a.className = "heart", s.push({
                    el: a,
                    x: e.clientX - 5,
                    y: e.clientY - 5,
                    scale: 1,
                    alpha: 1,
                    color: c()
                }), t.body.appendChild(a)
            }
 
            function i(e) {
                var a = t.createElement("style");
                a.type = "text/css";
                try {
                    a.appendChild(t.createTextNode(e))
                } catch (t) {
                    a.styleSheet.cssText = e
                }
                t.getElementsByTagName("head")[0].appendChild(a)
            }
 
            function c() {
                return "rgb(" + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + "," + ~~(255 * Math
                    .random()) + ")"
            }
            var s = [];
            e.requestAnimationFrame = e.requestAnimationFrame || e.webkitRequestAnimationFrame || e
                .mozRequestAnimationFrame || e.oRequestAnimationFrame || e.msRequestAnimationFrame || function (e) {
                    setTimeout(e, 1e3 / 60)
                }, i(
                    ".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"
                ), n(), r()
        }(window, document);
    </script>




















<body>
	<h1 align="center" style="color:rgb(155, 13, 13)">跨年系列代码</h1>


			<!--1 --------------------------------------------------------------------------------------------------------------------------------------------	 -->
			<div>
				<a href="./1/index.html">
					<h2 align="center">1.3D烟花

					</h2>
					<div align="center">
						<img src="https://img-blog.csdnimg.cn/d9b52ae2c447423bbb6ea0656fdb038e.png" width="900"
							height="431" />
					</div>
					<!-- 2--------------------------------------------------------------------------------------------------------------------------------------------	 -->
					<a href="./2/index.html">
						<h2 align="center">2.新年祝福</h2>
						<div align="center">
							<img src="https://img-blog.csdnimg.cn/423b1a606070475f8de90ace0b2ce184.png"
								width="900" height="431" />

							<!--3 --------------------------------------------------------------------------------------------------------------------------------------------	 -->
							<a href="./3/index.html">
								<h2 align="center">3.新年倒计时</h2>
								<div align="center">
									<img src="https://img-blog.csdnimg.cn/176899e3b1d04c299e31f3f875329f29.png"
										width="900" height="431" />
										
										
																	<!--4 --------------------------------------------------------------------------------------------------------------------------------------------	 -->
							<a href="./66/index.html">
								<h2 align="center">4.烟花模拟器【字幕版】</h2>
								<div align="center">
									<img src="https://img-blog.csdnimg.cn/25d7bab3be8d4706979f32e7ff010b38.png"
										width="900" height="431" />
																	<!--5 --------------------------------------------------------------------------------------------------------------------------------------------	 -->




</body>

</html>